<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js -->
		<!-- 第一种方式，将vue.js文件放在项目下，进行引入 -->
		<script src="js/vue.js"></script>
		<!-- 第二种方式，直接引入网络地址 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
		<!-- 引入网络传输库axios的js文件 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>
		<div id="app">	
		<button @click="doit()">获取笑话
		</button>				
		<ul>
			<li v-for="item in jokeMsg">{{item}}</li>
		</ul>
		</div>
		<script>
		var app=new Vue({
			el:"#app",
			data:{
				jokeMsg:[]	
			},
			methods:{
				doit:function(){
					var that=this			
					axios.get("https://autumnfish.cn/api/joke/list?num=3").
					then(function(response){
						// 获取响应结果
						console.log(response.data.jokes)
						that.jokeMsg=response.data.jokes
						
						}).
					catch(function(err){     })
					
				}
			}												
		})				
		</script>
		
	</body>
</html>
